<template>
  <div class="container">
    <h1 class="header" ref="header">头部</h1>
    <!-- 内容区 -->
    <!-- <div class="content"> -->
    <div class="swiper-container">
      <div class="swiper-wrapper content" :style="bodyHeight()">
        <!-- :style="bodyHeight()" -->
        <div class="swiper-slide content-1 bg1">slider1{{ HH }}</div>
        <div class="swiper-slide content-1 bg2">slider2</div>
        <div class="swiper-slide content-1 bg3">slider3</div>
      </div>
      <!-- </div> -->
    </div>
    <!-- 内容区 -->
    <h1 class="footer" ref="footer">底部</h1>
  </div>
</template>
<script>
import Swiper from "../assets/swiper/dist/js/swiper.min.js";
import "../assets/swiper/dist/css/swiper.min.css";
export default {
  name: "banner",
  data() {
    return {
      HH: "",
      tempH: 0,
    };
  },
  methods: {
    bodyWidth() {
      let width =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      setTimeout(() => {
        return width + "px";
      }, 1000);
    },
    bodyHeight() {
      let h =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      // 动态获取上下高度
      // h = h - 100;
      h = h - this.tempH;
      return "height:" + h + "px";
    },
  },
  created() {
    console.log("1.0");
  },
  mounted() {
    this.tempH =
      this.$refs.footer.offsetHeight + this.$refs.header.offsetHeight;
    console.log((this.HH = this.bodyHeight()), this.HH);

    // this.footerH = this.$refs.footer.offsetHeight;
    // this.headerH = this.$refs.header.offsetHeight;
    this.$nextTick(() => {
      var mySwiper = new Swiper(".swiper-container", {
        // autoplay: 50000, //可选选项，自动滑动
        direction: "vertical",
      });
    });
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
.header,
.footer {
  width: 100%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  background: #ccc;
  z-index: 999;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
  margin: 50px 0;
  .swiper-wrapper {
    width: 375px;
    height: 667px;
    .swiper-slide {
      width: 100%;
      height: 100%;
    }
  }
}
.bg1 {
  background: rgb(255, 156, 255) !important;
}
.bg2 {
  background: rgb(167, 251, 251) !important;
}
.bg3 {
  background: rgb(195, 255, 195) !important;
}
</style>
